<template>
	<view class="home">
		<view class="heades">
			<view class="u-page__tag-item" @click="searchs">
				<u-search
					v-model="value1"
					:show-action="false"
				></u-search>
			</view>
			<view class="navList">
			</view>
		</view>
		<view style="height: 165rpx;"></view>
		<!-- 内容 -->
		<view class="content">
			<!-- 轮播图 -->
			<view class="rotation">
				<u-swiper 
					:list="listImg" 
					keyName="image"
					indicator
					indicatorMode="line"
					circular
				></u-swiper>
			</view>
			<!-- 商品列表 -->
			<view class="shopList">
				<view class="listBox" v-for="(item,index) in shopDatalist" :key="index" @click="categoryClick(item.id)">
					<view class="listImg">
						<image :src="item.image"></image>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 热卖商品 -->
			<view class="bestShop">
				<view style="display: flex;">
					<view class="bestImg">
						<image src="../../../static/best.png" mode=""></image>
					</view>
					<text>热卖商品</text>
					<text @click="toSousu()" class="more" style="color: #3C9CFF;">更多>></text>
				</view>
				<scroll-view style="width: 100%; white-space: nowrap" scroll-x="true">
					<view style="display: flex;">
						<view class="shop" v-for="(shopItem,index) in bestShop" :key="index" @click="toDetails(shopItem.id)">
							<view class="shopImg">
								<image :src="shopItem.goods_image" mode=""></image>
							</view>
							<text>￥ {{shopItem.goods_price}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 选项跳转详情商品列表 -->
			<view class="purchaseList">
				<view class="purchaseListbox" v-for="(listItem,index) in listData" :key="index" @click="toDetails(listItem.id)">
					<view class="purchaseListimg">
						<image :src="listItem.goods_image"></image>
					</view>
					<text class="shopIntroduce">{{listItem.goods_name}}</text>
					<text class="shopMoney">￥ {{listItem.goods_price}}</text>
				</view>
			</view>
		</view>
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0,
			value1:'',// 搜索
			// list1: [{// 导航nav
			// 	name: '首页',
			// }, {
			// 	name: '推荐的说',
			// }, {
			// 	name: '电影'
			// }, {
			// 	name: '科技'
			// }, {
			// 	name: '音乐'
			// }, {
			// 	name: '美食'
			// }, {
			// 	name: '文化'
			// }, {
			// 	name: '财经'
			// }, {
			// 	name: '手工'
			// }],
			listImg:[],
			shopDatalist:[],
			bestShop:[],
			listData: [],
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// watch: {
	// 	value1(newValue, oldValue) {
	// 		console.log(newValue)
	// 	}
	// },
	onLoad() {
		this.listImageNetworking();//轮播图
		this.categoryDaraNetworking();//分类
		this.bestShopNetworking();//热卖商品
		this.listDataNetworking();//首页商品推荐
	},
	onPullDownRefresh() {
		this.listImageNetworking();//轮播图
		this.categoryDaraNetworking();//分类
		this.bestShopNetworking();//热卖商品
		this.listDataNetworking();//首页商品推荐
		setTimeout(function () {
		    uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		searchs() {
			uni.navigateTo({
				url: './search-lsit-data/index'
			})
		},
		toDetails(val) {
			uni.navigateTo({
				url: "./commodity-details/index?id="+val,
			})
		},
		// navList(item) {
		// 	console.log(item.index)
		// },
		categoryClick(id){
			uni.navigateTo({
				url: './search-lsit-data/index?id='+id
			})
		},
		listImageNetworking(){
			uni.showLoading({
			    title: '加载中'  
			});
			uni.request({
				url:this.baseurl+"index.php/api/index/get_banner_list",
				method:'POST',
				success:(res)=>{
					var data = res.data;
					if("1"==data.code){
						uni.hideLoading();
						this.listImg = data.data;
					}
				}
			})
		},
		categoryDaraNetworking(){
			uni.showLoading({
			    title: '加载中'  
			});
			uni.request({
				url:this.baseurl+"index.php/api/index/category_list",
				method:'POST',
				data:{
					cat_type:"index"
				},
				success:(res)=>{
					var data = res.data;
					if("1"==data.code){
						uni.hideLoading();
						this.shopDatalist = data.data;
					}
				}
			})
		},
		listDataNetworking(){
			uni.showLoading({
			    title: '加载中'  
			});
			uni.request({
				url:this.baseurl+"index.php/api/index/goods_list_index",
				method:'POST',
				data:{
					act_id:"4"
				},
				success:(res)=>{
					var data = res.data;
					if("1"==data.code){
						uni.hideLoading();
						this.listData = data.data.goodsList;
					}
				}
			})
		},
		bestShopNetworking(){
			uni.showLoading({
			    title: '加载中'  
			});
			uni.request({
				url:this.baseurl+"index.php/api/index/goods_list_index",
				method:'POST',
				data:{
					act_id:"3"
				},
				success:(res)=>{
					var data = res.data;
					if("1"==data.code){
						uni.hideLoading();
						this.bestShop = data.data.goodsList;
					}
				}
			})
		},
		toSousu() {
			uni.navigateTo({
				url: "./search-lsit-data/index",
			})
		}
	}
};
</script>

<style scoped lang="scss">
.home {
	background-color: #F4F4F4;
	padding-bottom: 24rpx;
	.heades {
		width: 100%;
		height: 176rpx;
		background-color: #F25F5F;
		padding: 14rpx 12rpx 0 12rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}
	.content {
		padding: 0 12rpx;
		.rotation {
			padding-top: 28rpx;
		}
		.shopList {
			display: flex;
			flex-wrap: wrap;
			height: 346rpx;
			background: url(../../../static/backjing.png) no-repeat;
			background-size: cover;
			padding: 36rpx 30rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			.listBox {
				width: 96rpx;
				margin-left: 46rpx;
				text-align: center;
				.listImg {
					width: 76rpx;
					height: 76rpx;
					margin: 0 auto;
					image {
						width: 100%;
						height: 100%;
					}
				}
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					padding-top: 12rpx;
				}
			}
			.listBox:nth-child(1),
			.listBox:nth-child(6){
				margin-left: 0;
			}
			.listBox:nth-child(6),
			.listBox:nth-child(7),
			.listBox:nth-child(8),
			.listBox:nth-child(9),
			.listBox:nth-child(10) {
				padding-top: 30rpx;
			}
		}
		.bestShop {
			height: 332rpx;
			background: url(../../../static/backjing.png) no-repeat;
			background-size: cover;
			margin-top: 32rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			.bestImg {
				width: 32rpx;
				height: 40rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			text {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				padding-left: 20rpx;
			}
			.more {
				margin-left: 360rpx;
			}
			.shop {
				text-align: center;
				padding-top: 32rpx;
				margin-left: 42rpx;
				.shopImg {
					width: 135rpx;
					height: 140rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #F25F5F;
					line-height: 34rpx;
					padding-left: 0;
				}
			}
			.shop:nth-child(1) {
				margin-left: 0;
			}
		}
		.purchaseList {
			display: flex;
			flex-wrap: wrap;
			margin-top: 32rpx;
			padding: 0 20rpx;
			.purchaseListbox {
				width: 335rpx;
				background: url(../../../static/listbej.png) no-repeat;
				background-size: cover;
				margin: 16rpx 0 0 16rpx;
				.purchaseListimg {
					width: 296rpx;
					height: 235rpx;
					padding: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.shopIntroduce,.shopMoney {
					padding: 0 20rpx;
				}
				.shopIntroduce {
					display: block;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}
				.shopMoney {
					display: block;
					font-size: 24rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #F25F5F;
					line-height: 34rpx;
					padding: 16rpx 0 20rpx 20rpx;
				}
			}
			.purchaseListbox:nth-child(1),
			.purchaseListbox:nth-child(2n+1) {
				margin-left: 0;
			}
			.purchaseListbox:nth-child(1),
			.purchaseListbox:nth-child(2){
				margin-top: 0;
			}
		}
	}
}
/deep/ .u-tabs__wrapper__nav__item__text {
	color: #FFFFFF !important;
}
/deep/ .u-tabs__wrapper__nav__line {
	background-color: #FFFFFF !important;
}
/deep/ .u-page__tag-item {
	padding: 40rpx 0;
}
</style>
